<template>
  <el-row class="flex-box" type="flex">
    <!-- 只渲染默认插槽的前三个子组件 -->
    <template v-for="(child, index) in componentList" :key="index">
      <el-col v-if="index < (isExpand ? componentList.length : props.rowCount - 1)" :span="colSpan">
        <component :is="child" style="width: 100%" />
      </el-col>
    </template>
    <el-col :span="menuWidth" class="search-box" v-if="hasSearch">
      <el-row type="flex" align="middle">
        <el-button class="search-btn" type="default" plain @click="search" :icon="ElIconSearch">
          查询
        </el-button>
        <el-button v-if="hasReset" type="default" plain @click="reset" style="width: 72px"
          >重置</el-button
        >
        <el-row
          v-if="componentList.length > props.rowCount - 1 && slots.operation == null"
          type="flex"
          align="middle"
          class="expand-btn"
          @click="isExpand = !isExpand"
        >
          <span style="margin-right: 4px; font-size: 14px">
            {{ isExpand ? '收起' : '展开' }}
          </span>
          <el-icon>
            <ArrowUp v-if="isExpand" />
            <ArrowDown v-else />
          </el-icon>
        </el-row>
        <div v-if="slots.operation" style="flex-grow: 1; min-width: 10px" />
        <slot name="operation" />
      </el-row>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { useSlots } from 'vue';
import { Search as ElIconSearch, ArrowUp, ArrowDown } from '@element-plus/icons-vue';

const slots = useSlots();
const emit = defineEmits<{
  (e: 'reset'): void;
  (e: 'search'): void;
}>();

const props = defineProps({
  hasSearch: {
    type: Boolean,
    default: true,
  },
  hasReset: {
    type: Boolean,
    default: true,
  },
  rowCount: {
    type: Number,
    default: 4,
    validator: (value: number) => {
      return [1, 2, 3, 4, 6].includes(value);
    },
  },
});

const isExpand = ref(false);

const search = () => {
  emit('search');
};
const reset = () => {
  emit('reset');
};

const componentList = computed(() => {
  let list = slots.default ? slots.default() : [];
  return list.filter(item => {
    return (
      item.type && typeof item.type === 'object' && 'name' in item.type && item.type.name !== null
    );
  });
});

// 根据rowCount计算每个组件的列宽
const colSpan = computed(() => {
  return 24 / props.rowCount;
});

const menuWidth = computed(() => {
  if (isExpand.value) {
    // 展开的时候
    let temp = componentList.value.length % props.rowCount;
    if (temp === 0) {
      return 24;
    } else {
      return (props.rowCount - temp) * (24 / props.rowCount);
    }
  } else {
    // 收起的时候
    if (componentList.value.length <= props.rowCount - 1) {
      return (props.rowCount - componentList.value.length) * colSpan.value;
    } else {
      return colSpan.value; // 如果超过3个，默认宽度为6
    }
  }
});

onMounted(() => {
  if (slots.operation != null) {
    isExpand.value = true; // 如果有操作按钮，默认展开
  }
});
</script>

<style lang="scss" scoped>
.flex-box {
  padding: 16px 24px 0;
  margin-bottom: 16px;
  background-color: white;
  .search-btn {
    color: $color-primary;
    border-color: $color-primary;
    &:hover {
      background-color: $color-primary-light-9;
    }
  }
  :deep(.el-form-item) {
    margin-right: 8px;
    margin-bottom: 16px;
  }
  .extend-box {
    img {
      cursor: pointer;
      margin-left: 8px;
    }
  }
  .search-box {
    flex-shrink: 0;
    padding-left: 8px;
    margin-bottom: 16px;
    flex-grow: 1;
  }
}
.expand-btn {
  display: inline-flex;
  margin-left: 20px;
  font-size: 16px;
  color: $color-primary;
  cursor: pointer;
}
</style>
